<body onload="todolist()">
    <div  class="app-container" id="taskList">
        <h1 class="app-header">待办事项清单</h1>
        <div class="add-task">
            <input type="text"  placeholder="添加新事项"  id="todoTitle">
            <input id="aa" type="button" value="+"  onclick="submit()" >
            <input type="text" id='list_title' placeholder="删除事项">
            <input type="submit" value="删除" onclick=del_todo()><br/><br/>
            <input type="submit" onclick=todolist1() value="已完成事项" >
            <input type="submit" onclick=todolist0() value="未完成事项">
            <input type="submit" onclick=todolistall() value="全部事项"><br/>
        <ul  id="listBox"></ul>
        </div>
    </div>

</body>
    <script>
        function todolist0(){
            fetch("/todos")
            .then(response => response.json())
            .then(data => {
                document.getElementById('listBox').innerHTML = "";
                var data1 = data.title;
                console.log(data1)
                for( i=0;i < data1.length;i++){
                    if (!data1[i].completed){
                    var t = '<li><input type="checkbox" name="'+data1[i].id+'"onchange="is_finish(this.name)"><span>'+data1[i].title+'</span></li>'
                        document.getElementById('listBox').innerHTML +=t;


                }

            }

        })
    }
    function submit(){
        var value = document.getElementById("todoTitle").value;
        var opts = {
            method:'post',
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            },
            body: 'title='+value,
        }
        fetch('/todos',opts).then(response=>{
            var result = response.text();
            result.then(res=>{
                document.getElementById('listBox').value = ''
                todolist();
            })
        })
    }
    function Finish(id){
        let opts ={
            method:'get',
            headers:{
                'Content-Type': 'application/x-www-from-urlencoded'
            },
        }
        fetch('/todos/mark_completed'+'?tood_id='+id,opts).then(response=>{
            todolist();
        })
    }
<!--    function isFinish(id){-->
<!--        if(id){-->
<!--            Finish(id);-->
<!--            todolist();-->
<!--        }-->
<!--    }-->
    function is_finish(id){
            fetch('/todos/mark_complete'+'?todo_id='+id)
                .then(res => res.json())
                .then(function(data){
                    if('title' in data){
                        todolist('all')
                    }
                })
        }

        function del_todo(){
           id = document.getElementById('list_title').value;
           fetch('/todos/del_todo_id'+'?todo_id='+id)
           .then(res=>res.json())
           .then(function(data){
                todolist('all');
           });
           }
        function todolist1(){
            fetch("/todos")
            .then(response => response.json())
            .then(data => {
                document.getElementById('listBox').innerHTML = "";
                var data1 = data.title;
                console.log(data1)
                for( i=0;i < data1.length;i++){
                    if (data1[i].completed){
                    var t = '<li><input type="checkbox" name="'+data1[i].id+'"onchange="is_finish(this.name)"><span>'+data1[i].title+'</span></li>'
                        document.getElementById('listBox').innerHTML +=t;


                }

            }

        })
    }
            function todolistall(){
            fetch("/todos")
            .then(response => response.json())
            .then(data => {
                document.getElementById('listBox').innerHTML = "";
                var data1 = data.title;
                console.log(data1)
                for( i=0;i < data1.length;i++){
                    var t = '<li><input type="checkbox" name="'+data1[i].id+'"onchange="is_finish(this.name)"><span>'+data1[i].title+'</span></li>'
                        document.getElementById('listBox').innerHTML +=t;
            }

        })
    }
    </script>